
#subHeader

  .labelDiv
    transform: translateX(-$icon_size/2) translateY($icon_size*1.5)

.login-container
  display: flex
  justify-items: center
  justify-content: center
  align-items: center
  width: 100%
  height: calc(100vh - 140px)
  flex-direction: column
  margin: 0
  padding: 0
  border-radius: 0
  background-size: cover
  background-image: url("./images/Background.jpg")

  .login-browser
    margin-bottom: 15px
    margin-top: -10vh
  
  .login-box
    display: flex
    background-color: white
    width: 45%
    box-shadow: 1px 2px 7px 0px #00000085
    border-radius: 10px

    form
      display: flex
      flex-direction: column
      width: 100%
      padding: 30px
      margin: 0

      .formError
          width: 100%

      .form-box
        width: 100%
        margin-top: 10px

        .formLabelRequired
          width: 100%
          padding: 0
          margin: 0
          text-align: left
          font-size: 1em

        .formField 
          width: 100%
          padding: 0
          margin: 0

          input
            width: 100%
            padding: 0
            margin: 0
            height: 30px
            font-size: 1em
            user-select: #000000
    
    .login-button
      display: flex
      flex-direction: column
      align-items: center
      width: 100%

      input
        margin: 0
        padding: 0
        width: 100%
        height: 40px
        border-radius: 5px

        &:hover
          box-shadow: 0px 2px 4px #000000a6
          background-color: white
          transition: all 0.2s
      
      img.ptr[src="images/help.png"]
        width: 16px !important
      

@media (min-width: 1024px)
  .login-container 
    .login-box
      width: 30%

@media (min-width: 1440px)
  .login-container 
    .login-box
      width: 20%
